<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增展馆</el-button>
            </div>
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe v-loading="listLoading">
            <el-table-column label="序号" type="index" :index="indexMethod" width="80px"></el-table-column>
            <el-table-column label="展馆名称" prop="title" />
            <el-table-column label="排序" prop="sort" />
            <el-table-column label="创建时间" prop="created_at"/>
            <el-table-column label="状态" prop="status">
                <template slot-scope="scoped">
                    <el-tag v-if="scoped.row.status === 1" type="success">开启</el-tag>
                    <el-tag v-if="scoped.row.status === 2" type="danger">关闭</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="普通集齐横幅id" prop="lower_collect_banner_id"></el-table-column>
            <el-table-column label="高级集齐横幅id" prop="picture"></el-table-column>
            <el-table-column label="集齐特效" prop="collect_special">
                <template slot-scope="scope">
                    <el-image :src="scope.row.collect_special" fit="fill" :lazy="true" class="giftIcon">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="集齐普通横幅字体颜色" prop="lower_collect_banner_color"></el-table-column>
            <el-table-column label="集齐高级横幅字体颜色" prop="high_collect_banner_color"></el-table-column>
            <el-table-column label="是否推送" prop="is_push">
                <template slot-scope="scope">
                    {{ scope.row.is_push === 1 ? '推送' : '不推送' }}
                </template>
                
            </el-table-column>

            <el-table-column label="备注" prop="note"/>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleCheck(row)">查看</el-button>
                    <el-button v-if="row.status === 2" type="text" @click="handleSwitchOn(row)">开启</el-button>
                    <el-button v-if="row.status === 1" type="text" @click="handleSwitchOff(row)">关闭</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加展馆 -->
        <addEditModal
            :dialogVisible.sync="dialogVisible"
            :title.sync="dialogTitle"
            @updateTable="handleSearch"
        ></addEditModal>
    </el-card>
</template>

<script>
  import { listData, hallStatus, hallSave } from '@/api/giftPavilion'

  import addEditModal from './childComps/addEditModal'
  
  export default {
    name: 'giftPavilionList',
    components: {
        addEditModal,
    },
    data() {
        return {
            tableList: [],
            listLoading: false,
            dialogTitle: 'add',
            nickname: '',
            listQuery: {
                page: 1,
                perPage: 10,
            },
            total: 0,
            /* 弹出框开关 */
            dialogVisible: false,
    
            rejectLoading: false,
            passLoading: false,
            id: '',
        }
    },
    created() {
        this.initData()
    },
    methods: {
        indexMethod(index) {
            return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
        },
        handleAdd() {
            this.dialogVisible = true
            this.dialogTitle = 'add'
        },
        handleSearch() {
            this.listQuery.page = 1
            this.initData()
        },
        handleReset() {
            this.listQuery = {
                user_code: '',
                nickname: '',
                page: 1,
                perPage: 10,
            }
            this.initData()
        },
        async initData() {
            this.listLoading = true
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const { data } = await listData(this.listQuery)
            this.listQuery.page = data.meta.page
            this.total = data.meta.total
            this.tableList = data.list
            this.listLoading = false
        },
        handleCheck(row) {
            this.$router.push({
				path: 'giftPavilionDetails',
				query: {
					id: row.id
				}
			})
        },
        postHallStatus(data) {
            hallStatus(data).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.initData()
                }
            })
        },
        handleSwitchOn(row) {
            this.$confirm('确认开启展馆?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.postHallStatus({
                    id: row.id,
                    status: 1
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
        handleSwitchOff(row) {
            this.$confirm('确认关闭展馆?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.postHallStatus({
                    id: row.id,
                    status: 2
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        }
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  